// vuex的模块 作用： 筛选处理权限问题
import { constantRoutes, asyncRoutes } from '@/router'
export default {
  namespaced: true,
  state() {
    // 渲染侧边栏 初始值是静态路由
    return { routes: [...constantRoutes] }
  },
  getters: {},
  mutations: {
    // 设置菜单信息
    setRoutes(state, data) {
      // data 是用户的动态路由
      // 得到用户的动态路由：和静态路由放到一起 提供给侧边栏使用
      state.routes = [...constantRoutes, ...data]
    }
  },
  actions: {
    filterRoutes(context, menus) {
      // context.commit('setRoutes', 筛选后的动态路由)
      // 根据服务器端返回的页面标示识和本地完整的动态路由，筛选出属于用户的动态路由
      // 1.筛选出用户动态路由
      const userAsyncRoutes = []
      asyncRoutes.forEach(item => {
        // name在menus里面 ，说明拥有该页面权限
        if (menus.includes(item.name)) userAsyncRoutes.push(item)
      })
      // 添加上 * 通配 404
      userAsyncRoutes.push({ path: '*', redirect: '/404', hidden: true })
      // 2.设置侧边栏
      context.commit('setRoutes', userAsyncRoutes)
      // 3. 返回用户的动态路由
      return userAsyncRoutes
    }
  }
}
